<template>
	<view class="wrap" style="padding-bottom: 60px;">
		
		<view class="addBtn" @click="addNewe()">+</view>
		<view>
			<view class="search">
				<u-search v-model="keywords" @custom="search" @search="search"></u-search>
			</view>
			<!-- <view v-if="list.length > 0">
				<view class="item" v-for="(item, index) in list" :key="index">{{ `${index + 1}--${item.nickname}` }}</view>
				<u-loadmore :status="status" />
			</view>

			<view v-else>
				<u-empty text="目前还没数据" mode="list"></u-empty>
			</view> -->
			
			<view v-if="lists.length > 0">
				<u-card class="task-list-item" :border="false" padding="20" margin="20rpx" v-for="(item,i) in lists" @click="showPho(item)">
					<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
						<view style="display: flex;align-items: center;" class="u-font-22"><image class="user-images" src="/static/aidex/images/truck.png"></image>{{item.lsh}}</view>
					</view>
					<view class="" slot="body">
						<u-row gutter="16">
							<u-col span="6" style="color: #999999;display: flex;" class="u-font-13">
								
								
								<view style="float: right;">{{$u.timeFormat(item.createtime, 'yyyy年mm月dd日')}}</view>
								<view style="margin-left: 20rpx;">录入者：{{item.nickname}}</view>
							</u-col>
							<u-col span="6" class="u-rela u-row-right" style="text-align:right" v-if="isEdtor==true">
								
								<u-button size="mini" type="warning" :ripple="true" ripple-bg-color="#909399" @click="editNewe(item.id)"  shape="circle" style="margin-right: 10rpx;">
									<u-icon name="edit-pen" size="26" class="u-p-r-8"></u-icon>
									</u-button>
								<u-button size="mini" type="error" :ripple="true" ripple-bg-color="#909399" @click="deleNewe(item)" shape="circle">
									<u-icon name="close-circle" size="26" class="u-p-r-8"></u-icon>
									</u-button>
							</u-col>
						</u-row>
					</view>
				</u-card>
				<u-loadmore :status="status" />
			</view>
			
			<view v-else>
				<u-empty text="目前还没数据" mode="list"></u-empty>
			</view>
			
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEdtor:true,
				keywords:"",
				params: {
					pageNum: 1,
					pageSize: 10
				},
				status: 'loadmore', //控制上拉加载的状态
				loading: true, //控制在响应回来前展示loading加载
				lists: [] //要展示的列表
			}
		},
		onLoad() {
				this.getList(); //获取列表
			},
			// 下拉刷新
			onPullDownRefresh() {
			        this.status = 'loadmore';
					this.params.pageNum = 1;
					this.getList();
					setTimeout(() => {
						uni.stopPullDownRefresh();
					}, 1000);
				},
				// 上拉加载
				onReachBottom() {
					if (this.status !== 'nomore') {
						this.status = 'loading';
						this.params.pageNum++;
						this.getList();
					}
				},

		methods: {
			
		
			getList(){
				this.$u.api.txj.lists(this.params)
				.then(res => {
				console.log(res)
					if (res.code == 200) {
						let { pageNum, pageSize } = this.params;
						let { rows } = res;
				
						if (rows.length < pageSize) this.status = 'nomore'; //如果响应值列表的长度小于我们所请求的页数 那就意味已经没有下一页了
						if (pageNum === 1) this.lists = rows;
						//如果pagenum是第一页，直接赋值
						else this.lists = [...this.rows, ...rows]; //不是第一页 将原数组和得到的数组进行合并
					}else{
						this.$u.toast(res.msg);
					}
				}
				);
			},
			//添加页面
			addNewe(){
				uni.navigateTo({
					url: '/pages/works/battery/add'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.item {
	height: 150rpx;
	border-bottom: solid 1px #19be6b;
}
.wrap .search{
	background: #ffffff;
}
.apply-text{
	font-size: 28rpx;
	color: #333333;
	span{
		color: #999999;
	}
}
.user-images{
	width: 28px;
	height:28px;
	margin-right: 8px;
}
.apply-list-foot{
	font-size: 28rpx;
}
.personnel-list{
	display: flex;
	align-items: center;
	flex-wrap:wrap;
	.personnel-user{
		position: relative;
		margin: 5px 9px 0;
	}
	.user-images{
		width: 48px;
		height:48px;
		margin-right:0;
		
	}
	.iconfont{
		position: absolute;
		top:-12px;
		right:-5px;
		color: #FE0100;
	}	
}
	.addBtn{
		z-index: 100;
		position: fixed;
		bottom: 2rem;
		right: 1rem;
		// margin-top: 80%;
		// margin-left: 90%;
		background-color: #2b85e4;
		width: 100rpx;
		height:100rpx;
		border-radius: 50rpx;
		color: #fff;
		font-size: 20px;
		text-align: center;
		font-weight: bold;
		padding: 18rpx;
		box-shadow: 2rpx 4rpx 5rpx #ccc;	
	}
</style>
